<template>
    <div class="raise">
        <div>
            <div class="tc">
                <router-link to="raiseSearch">
                    <button class="raise-seek">搜索</button>
                </router-link>
            </div>
            <div>
                <mt-navbar class="page-part" v-model="selected">
                    <mt-tab-item id="1">全部</mt-tab-item>
                    <!--<mt-tab-item id="2" v-if="type != ''" v-for="{todo , index} in type">{{todo.payrollTypeName}}</mt-tab-item>-->
                    <mt-tab-item id="2" v-if="type != ''">{{type[0].payrollTypeName}}</mt-tab-item>
                    <mt-tab-item id="3" v-if="type != ''">{{type[1].payrollTypeName}}</mt-tab-item>
                    <mt-tab-item id="4" v-if="type != ''">{{type[2].payrollTypeName}}</mt-tab-item>
                    <mt-tab-item id="5" v-if="type != ''">{{type[3].payrollTypeName}}</mt-tab-item>
                    <mt-tab-item id="6" v-if="type != ''">{{type[4].payrollTypeName}}</mt-tab-item>
                </mt-navbar>
                <!--<div v-for="{todo , index} in type"></div>-->
                <mt-tab-container v-model="selected" swipeable>
                    <mt-tab-container-item id="1" v-tap="test()">
                        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="(item , index) in list" class="p-r">
                                <div class="width-75">
                                    <div class="m-t-28 flex">
                                        <!--头像、名字和学校-->
                                        <div class="row">
                                            <div>
                                                <img :src="item.usersTo.portrait" alt="" class="portrait">
                                            </div>
                                            <div class="m-l-14">
                                                <h2 class="fs-36 c-3">{{item.usersTo.nickName}}</h2>
                                                <p class="fs-24 c-3 m-t-18">{{item.school.name}}</p>
                                            </div>
                                        </div>
                                        <div class="rt fs-24">
                                            {{item.ago}}
                                        </div>
                                    </div>
                                    <!--筹帮内容-->
                                    <router-link :to="{path:'/raiseDetails',query:{id:item.payrollId}}">
                                        <div class="fs-30 c-3 m-t-18 l-h-4">
                                            <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！payrollId-->
                                            {{item.requirement}}
                                        </div>
                                        <div class="m-t-18">
                                            <img v-for="imgsrc in list[index].payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                                        </div>

                                        <div class="m-t-18">
                                            <i class="iconfont icon-dingweiweizhi fs-30"></i>
                                            <span class="fs-24">{{item.payrollAddress}}</span>
                                        </div>
                                    </router-link>
                                    <!--<div class="raise-single c-f">
                                                可抢单
                                            </div>-->
                                    <div class="m-t-4 c-3">
                                        <div class="fs-24 fs-30">
                                            酬金:
                                            <span class="c-f3">￥{{item.payrollMoney2}}块</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="index-blank m-t-18">
                                </div>
                            </li>
                        </ul>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="2">
                        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="(item , index) in list1" class="p-r">
                                <div class="width-75">
                                    <div class="m-t-28 flex">
                                        <!--头像、名字和学校-->
                                        <div class="row">
                                            <div>
                                                <img :src="item.usersTo
                                                                                                    .portrait" alt="" class="portrait">
                                            </div>
                                            <div class="m-l-14">
                                                <h2 class="fs-36 c-3">{{item.usersTo.nickName}}</h2>
                                                <p class="fs-24 c-3 m-t-18">{{item.school.name}}</p>
                                            </div>
                                        </div>
                                        <div class="rt fs-24">
                                            {{item.ago}}
                                        </div>
                                    </div>
                                    <!--筹帮内容-->
                                    <router-link :to="{path:'/raiseDetails',query:{id:item.payrollId}}">
                                        <div class="fs-30 c-3 m-t-18 l-h-4">
                                            <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！-->
                                            {{item.requirement}}
                                        </div>
                                        <div class="m-t-18">
                                            <img v-for="imgsrc in list1[index].payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                                        </div>
                                        <div class="m-t-18">
                                            <i class="iconfont icon-dingweiweizhi fs-30"></i>
                                            <span class="fs-24">{{item.payrollAddress}}</span>
                                        </div>
                                    </router-link>
                                    <!--<div class="raise-single c-f">
                                                可抢单
                                            </div>-->
                                    <div class="m-t-4 c-3">
                                        <div class="fs-24 fs-30">
                                            酬金:
                                            <span class="c-f3">￥{{item.payrollMoney2}}块</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="index-blank m-t-18">
                                </div>
                            </li>
                        </ul>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="3">
                        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="(item , index) in list2" class="p-r">
                                <div class="width-75">
                                    <div class="m-t-28 flex">
                                        <!--头像、名字和学校-->
                                        <div class="row">
                                            <div>
                                                <img :src="item.usersTo.portrait" alt="" class="portrait">
                                            </div>
                                            <div class="m-l-14">
                                                <h2 class="fs-36 c-3">{{item.usersTo.nickName}}</h2>
                                                <p class="fs-24 c-3 m-t-18">{{item.school.name}}</p>
                                            </div>
                                        </div>
                                        <div class="rt fs-24">
                                            {{item.ago}}
                                        </div>
                                    </div>
                                    <!--筹帮内容-->
                                    <router-link :to="{path:'/raiseDetails',query:{id:item.payrollId}}">
                                        <div class="fs-30 c-3 m-t-18 l-h-4">
                                            <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！-->
                                            {{item.requirement}}
                                        </div>
                                        <div class="m-t-18">
                                            <img v-for="imgsrc in list2[index].payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                                        </div>
                                        <div class="m-t-18">
                                            <div>
                                                <i class="iconfont icon-dingweiweizhi fs-30"></i>
                                                <span class="fs-24">{{item.payrollAddress}}</span>
                                            </div>
                                            <!--<div class="raise-single c-f">
                                                        可抢单
                                                    </div>-->
                                        </div>
                                    </router-link>
                                    <div class="m-t-4 c-3">
                                        <div class="fs-24 fs-30">
                                            酬金:
                                            <span class="c-f3">￥{{item.payrollMoney2}}块</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="index-blank m-t-18">
                                </div>
                            </li>
                        </ul>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="4">
                        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="(item , index) in list3" class="p-r">
                                <div class="width-75">
                                    <div class="m-t-28 flex">
                                        <!--头像、名字和学校-->
                                        <div class="row">
                                            <div>
                                                <img :src="item.usersTo.portrait" alt="" class="portrait">
                                            </div>
                                            <div class="m-l-14">
                                                <h2 class="fs-36 c-3">{{item.usersTo.nickName}}</h2>
                                                <p class="fs-24 c-3 m-t-18">{{item.school.name}}</p>
                                            </div>
                                        </div>
                                        <div class="rt fs-24">
                                            {{item.ago}}
                                        </div>
                                    </div>
                                    <!--筹帮内容-->
                                    <router-link :to="{path:'/raiseDetails',query:{id:item.payrollId}}">
                                        <div class="fs-30 c-3 m-t-18 l-h-4">
                                            <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！-->
                                            {{item.requirement}}
                                        </div>
                                        <div class="m-t-18">
                                            <img v-for="imgsrc in list3[index].payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                                        </div>
                                        <div class="m-t-18">
                                            <i class="iconfont icon-dingweiweizhi fs-30"></i>
                                            <span class="fs-24">{{item.payrollAddress}}</span>
                                        </div>
                                    </router-link>
                                    <!--<div class="raise-single c-f">
                                                可抢单
                                            </div>-->
                                    <div class="m-t-4 c-3">
                                        <div class="fs-24 fs-30">
                                            酬金:
                                            <span class="c-f3">￥{{item.payrollMoney2}}块</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="index-blank m-t-18">
                                </div>
                            </li>
                        </ul>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="5">
                        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="(item , index) in list4" class="p-r">
                                <div class="width-75">
                                    <div class="m-t-28 flex">
                                        <!--头像、名字和学校-->
                                        <div class="row">
                                            <div>
                                                <img :src="item.usersTo.portrait" alt="" class="portrait">
                                            </div>
                                            <div class="m-l-14">
                                                <h2 class="fs-36 c-3">{{item.usersTo.nickName}}</h2>
                                                <p class="fs-24 c-3 m-t-18">{{item.school.name}}</p>
                                            </div>
                                        </div>
                                        <div class="rt fs-24">
                                            {{item.ago}}
                                        </div>
                                    </div>
                                    <!--筹帮内容-->
                                    <router-link :to="{path:'/raiseDetails',query:{id:item.payrollId}}">
                                        <div class="fs-30 c-3 m-t-18 l-h-4">
                                            <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！-->
                                            {{item.requirement}}
                                        </div>
                                        <div class="m-t-18">
                                            <img v-for="imgsrc in list4[index].payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                                        </div>
                                        <div class="m-t-18">
                                            <i class="iconfont icon-dingweiweizhi fs-30"></i>
                                            <span class="fs-24">{{item.payrollAddress}}</span>
                                        </div>
                                    </router-link>
                                    <!--<div class="raise-single c-f">
                                                可抢单
                                            </div>-->
                                    <div class="m-t-4 c-3">
                                        <div class="fs-24 fs-30">
                                            酬金:
                                            <span class="c-f3">￥{{item.payrollMoney2}}块</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="index-blank m-t-18">
                                </div>
                            </li>
                        </ul>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="6">
                        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                            <li v-for="(item , index) in list5" class="p-r">
                                <div class="width-75">
                                    <div class="m-t-28 flex">
                                        <!--头像、名字和学校-->
                                        <div class="row">
                                            <div>
                                                <img :src="item.usersTo.portrait" alt="" class="portrait">
                                            </div>
                                            <div class="m-l-14">
                                                <h2 class="fs-36 c-3">{{item.usersTo.nickName}}</h2>
                                                <p class="fs-24 c-3 m-t-18">{{item.school.name}}</p>
                                            </div>
                                        </div>
                                        <div class="rt fs-24">
                                            {{item.ago}}
                                        </div>
                                    </div>
                                    <!--筹帮内容-->
                                    <router-link :to="{path:'/raiseDetails',query:{id:item.payrollId}}">
                                        <div class="fs-30 c-3 m-t-18 l-h-4">
                                            <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！-->
                                            {{item.requirement}}
                                        </div>
                                        <div class="m-t-18">
                                            <img v-for="imgsrc in list5[index].payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                                        </div>
                                        <div class="m-t-18">
                                            <i class="iconfont icon-dingweiweizhi fs-30"></i>
                                            <span class="fs-24">{{item.payrollAddress}}</span>
                                        </div>
                                    </router-link>
                                    <!--<div class="raise-single c-f">
                                                可抢单
                                            </div>-->
                                    <div class="m-t-4 c-3">
                                        <div class="fs-24 fs-30">
                                            酬金:
                                            <span class="c-f3">￥{{item.payrollMoney2}}块</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="index-blank m-t-18">
                                </div>
                            </li>
                        </ul>
                    </mt-tab-container-item>
                </mt-tab-container>
                <!--底部-->
                <div>
                    <div style="margin-bottom: 1rem">

                    </div>
                    <ul class="flex p-lr-6 footer">
                        <li>
                            <router-link to="/index">
                                <img src="../img/news-h.png" alt="" class="footer-icon">
                                <p>资讯</p>
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/dynamic">
                                <img src="../img/dynamic.png" alt="" class="footer-icon">
                                <p>动态</p>
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/release">
                                <img src="../img/choice.png" alt="" class="footer-icon-big">
                            </router-link>

                        </li>
                        <li>
                            <router-link to="/raise">
                                <img src="../img/raise-h.png" alt="" class="footer-icon">
                                <p>筹帮</p>
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/unused">
                                <img src="../img/unused.png" alt="" class="footer-icon">
                                <p>闲置</p>
                            </router-link>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import { allDate, contrastDate, f } from '../assets/js/common'
export default {
    data() {
        return {
            // page是保存分页的从0开始
            //list是保存筹帮分类的数组从0开始
            //selected是从一开始的      //所有selected为2的时候控制分页的page是1 ,list也是1
            selected: '1',
            page: 0,   //第几页，默认是第一页
            page1: 0,    //筹帮的第一个分类的第几页
            page2: 0,
            page3: 0,
            page4: 0,
            page5: 0,
            type: "",  //筹帮种类
            list: [],   //全部筹帮
            list1: [], //筹帮的第一个分类的内容并存储到这个数组里面
            list2: [], //筹帮的第二个分类
            list3: [], //筹帮的第三个分类
            list4: [], //筹帮的第四个分类
            list5: [], //筹帮的第五个分类
            loadingtrue: false,
            showModal: false,
            inputContent: "",
            showList: []   //搜索后的筹帮
        };
    },
    methods: {
        test() {
            // console.log(this.selected);
            //    this.loadMore();

        },
        // 无线下拉
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                if (this.selected == 1) {
                    this.page += 1; //全部筹办的页数加一
                    this.allRaise("isnan", this.page);   //调用ajax
                } else if (this.selected == 2) {
                    this.page1 += 1; //对应的页数加一
                    this.allRaise(this.type[0].payrollTypeId, this.page1);   //调用对应ajax
                } else if (this.selected == 3) {
                    this.page2 += 1; //对应的页数加一
                    this.allRaise(this.type[1].payrollTypeId, this.page2);   //调用对应ajax
                } else if (this.selected == 4) {
                    this.page3 += 1; //对应的页数加一
                    this.allRaise(this.type[2].payrollTypeId, this.page3);   //调用对应ajax
                } else if (this.selected == 5) {
                    this.page4 += 1; //对应的页数加一
                    this.allRaise(this.type[3].payrollTypeId, this.page4);   //调用对应ajax
                } else if (this.selected == 6) {
                    this.page5 += 1; //对应的页数加一
                    this.allRaise(this.type[4].payrollTypeId, this.page5);   //调用对应ajax
                }
                this.loading = false;
            }, 500);
        },
        raiseType() {
            this.$http({
                method: "get",
                url: localPath + '/payroll/findAllPayrollType',
                data: ""
            }).then((data) => {
                this.type = data.data;  //将获取到的筹帮种类放到type里面
            }).cahch((error) => {
                console.log(error);
            })
        },
        allRaise(TypeId, page) {

            // 全部筹帮
            var params = new URLSearchParams();
            params.append("page", page);
            params.append("rows", 4);
            params.append("school.schoolId", localStorage.schoolId);

            if (TypeId != "isnan") {  //判断如果参数不是isnan的话就把筹帮分类的ID传给后台
                params.append("payrollType.payrollTypeId", TypeId);
            } else {
                // 否则什么也不做
            }

            this.$http({
                method: "post",
                url: localPath + '/payroll/findPagepPyroll',
                data: params
            }).then((data) => {
                //如果数据不等于空就执行
                if (data.data.rows != "") {
                    // 循环数据
                    for (let i = 0; i < data.data.rows.length; i++) {
                        //几分钟前
                        data.data.rows[i].ago = contrastDate(data.data.rows[i].createTime);
                        //  图片可能不是一张 通过逗号给分开
                        if (data.data.rows[i].payrollPicture == null) {

                        } else {
                            data.data.rows[i].payrollPicture = data.data.rows[i].payrollPicture.split(",");
                        }

                        // 将结束时间进行解析
                        data.data.rows[i].payrollTime = allDate(data.data.rows[i].payrollTime);

                        if (this.selected == 1) {
                            this.list.push(data.data.rows[i]);
                        } else if (this.selected == 2) {
                            this.list1.push(data.data.rows[i]);
                        } else if (this.selected == 3) {
                            this.list2.push(data.data.rows[i]);
                        } else if (this.selected == 4) {
                            this.list3.push(data.data.rows[i]);
                        } else if (this.selected == 5) {
                            this.list4.push(data.data.rows[i]);
                        } else if (this.selected == 6) {
                            this.list5.push(data.data.rows[i]);
                        }
                    }

                }

            }).catch((error) => {
                console.log(error);
            })
        }
    },
    watch: {
        selected() {   //this.selected不等于默认的1的时候就发生改变 就调用loadMire的这个函数
            this.loadMore();
        }
    },
    mounted() {
        this.raiseType();   //页面插件前执行
        document.addEventListener(f());
    },
    directives: {
        tap: {
            // 指令的定义
            inserted: function(el) {
                el.focus()
            }
        }
    }

};
</script>
<style>
.mint-cell-wrapper {
    padding: 0px 0px;
}

.raise-seek {
    width: 7rem;
    height: .5rem;
    margin: .2rem auto;
    padding: 0 .2rem;
    border-radius: 5px;
    border: 1px solid #333333;
    background-color: #ffffff;
}

.raise-portrait {
    width: .87rem;
    height: .87rem;
}

.raise-img {
    width: 1.83rem;
    height: 1.31rem;
}

.raise-single {
    width: 1.47rem;
    height: .6rem;
    position: absolute;
    right: .0rem;
    bottom: 0.8rem;
    border-radius: 24px 0px 0px 24px;
    padding: .12rem 0rem 0 .3rem;
    background-color: #fe8103;
}



/*导航条*/

.raise .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #c29354;
    color: #c29354;
    margin-bottom: 0px;
}
</style>
